<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>登录</title>
    <script src="../js/axios.min.js"></script>
    <link rel="stylesheet" href="../css/TBreset.css" />
    <style>
      html {
        background-color: #15171e;
      }
      #Sign {
        width: 510px;
        height: 640px;
        /* background-color: green; */
        margin: auto;
      }
      .sp1 {
        display: block;
        width: 510px;
        height: 150px;
        /* background-color: red; */
        text-align: center;
        margin-top: 70px;
        margin-bottom: 40px;
      }
      #un {
        width: 100%;
        height: 50px;
        background-color: #111218;
        border-radius: 5px;
        color: #fff;
        outline-style: none;
        border: 0;
      }
      #pw {
        width: 100%;
        height: 50px;
        outline-style: none;
        border: 0;
        background-color: #111218;
        border-radius: 5px;
        /* margin-bottom: 40px; */
        color: #fff;
      }
      #Sign input:nth-child(6) {
        width: 100%;
        height: 50px;
        border-radius: 5px;
        color: #fff;
        background-color: #0074e0;
        /* outline-style: none; */
        border: 0;
      }
    </style>
  </head>
  <body>
    <div id="Sign">
      <span class="sp1"
        ><img src="../images/sign.jpg" alt="" style="height: 150px"
      /></span>

      <!-- 账号12121 -->
      <input type="text" placeholder="用户名" id="un" /><span
        style="display: block; margin-bottom: 70px"
      ></span>

      <input type="password" placeholder="密码" id="pw" /><span
        style="display: block; margin-bottom: 70px"
      ></span>

      <input type="button" value="登录" id="" />
    </div>

    <script>
      let ipts = document.querySelectorAll("#Sign input");
      let isUsername = false;
      ipts[0].onchange = function () {
        // console.log(this);
        let username = this.value;
        let reg = /^\w{3,18}$/;
        if (reg.test(username)) {
          this.nextElementSibling.innerHTML = "格式正确";
          this.nextElementSibling.style.color = "white";
          isUsername = true;
        } else {
          this.nextElementSibling.innerHTML = "格式不正确";
          this.nextElementSibling.style.color = "red";
          isUsername = false;
        }
      };

      let isPassword = false;
      ipts[1].onchange = function () {
        // alert(this);
        let password = this.value;
        let reg = /^.{3,32}$/;
        if (reg.test(password)) {
          this.nextElementSibling.innerHTML = "格式正确";
          this.nextElementSibling.style.color = "white";
          isPassword = true;
        } else {
          this.nextElementSibling.innerHTML = "格式不正确";
          this.nextElementSibling.style.color = "red";
          isPassword = false;
        }
      };

      console.log(ipts[2]);
      // console.log(keep);
      ipts[2].onclick = function () {
        console.log(1);
        if (isUsername && isPassword) {
          let ipts = document.querySelectorAll("#Sign input");
          let username = ipts[0].value;
          let password = ipts[1].value;
          /* 
          登录接口

     接口地址：http://jx.xuzhixiang.top/ap/api/login.php
     接口请求方式：get
     接口参数：
          username用户名
          password密码
     使用方式
          http://jx.xuzhixiang.top/ap/api/login.php?username=11&password=1212

     服务器返回json数据
          */
          let url = "http://jx.xuzhixiang.top/ap/api/login.php";
          axios.get(url, { params: { username, password } }).then((r) => {
            console.log(r.data);
            alert(r.data.msg);
            if (r.data.code === 1) {
              // 用户id
              console.log(r.data.data.id);
              console.log(r.data.data.token);

              // 把商品id保存至本地存储
              localStorage.setItem("battlenetId", r.data.data.id);

              // 把商品的token保存至本地存储
              localStorage.setItem("battlenetToken", r.data.data.token);
                location.href = "battlenet shop.html";
            }
          });
        }
      };
    </script>
  </body>
</html>
